<template>
	<div id="main_container">
		<div id="tip_container">
			<div id="tip_dialog">{{tip}}</div>
		</div>
		<div class="container">
			<h5>User</h5>
			<input v-model="name" placeholder="name..">
			<input type="password" v-model="pw" placeholder="password..">
			<button @click="signup">signup</button>
			<button @click="login">login</button>
			<button @click="logout">logout</button>
			<button @click="getUser">getUser</button>
		</div>
		<div class="container">
			<h5>Add Label</h5>
			<input v-model="label"></input>
			<button @click="addLabel">submit</button>
		</div>
		<div class="container">
			<h5>Edit Label</h5>
			<span v-for="(l,i) in labels" class="edit-container">
				<input class="label"  @blur="updateLabel(l, i)" v-model="l.name">
				<span class="x" @click="removeLabel(l.l_id, i)">x</span>
			</span>
		</div>
		<div class="container">
			<h5>Add Diary</h5>
			<input v-model="text"></input>
			<div class="m-top">
				<span class="label" v-for="l in labels"
				:class="{active:l.active}"
				@click="l.active = !l.active">{{l.name}}</span>
			</div>
			<button @click="add">submit</button>
		</div>
		<div class="container">
			<h5>Get Diary</h5>
			<div class="diary-filter"><span class="fl">By date:</span><input type="date" v-model="date"></div>
			<div class="diary-filter">
				<span class="fl">By label:</span>
				<span class="label" v-for="l in labels"
				:class="{active: l.filter_active}"
				@click="l.filter_active = !l.filter_active">{{l.name}}</span>
			</div>
			<div class="diary-filter">
				<span class="fl">page:</span>
				<input type="number" v-model="page">
			</div>
			<button @click="getDiary">get</button>
			<p v-for="(d,i) in diarys" class="cursor">{{i+1}}. {{d.content}}</p>
			<p>一共{{diaryCount}}条</p>
		</div>
	</div>
</template>
<script>
export default{
	name: 'diary',
	data(){
		return{
			name:'',
			pw:'',
			text:'',
			label:'',
			diarys: [],
			diaryCount: 0,
			labels:[],
			date:'',
			page:1,
			tip: '咕叽咕叽'
		}
	},
	mounted(){
		this.getLabel();
	},
	methods:{
		getUser(){
			this.$http.post('getUser').then(res => {
				
			})
		},
		signup(){
			this.$http.post('signup',{name:this.name, pw: this.pw}).then(res => {
				if(res.body.code === 200) this.myAlert('欢迎加入！');
			})
		},
		login(){
			this.$http.post('login',{name:this.name, pw: this.pw}).then(res => {
				
			})
		},
		logout(){

		},
		add(){
			const labels = this.labels.filter(e => e.active);
			const labelIds = labels.map(e => e.l_id);
			this.$http.post('add',{text: this.text, labels: labelIds}).then(res => {
				console.log(res)
				this.text = '';
				this.myAlert('新增完毕');
			})
		},
		addLabel(){
			this.$http.post('addLabel',{label: this.label}).then(res => {
				console.log(res)
				this.label = '';
				this.myAlert('新增完毕');
			})
		},
		getLabel(){
			this.$http.post('getLabel', '').then(res => {
				let labels = res.body;
				labels.map(e => e.active = e.filter_active = false);
				this.labels = labels;
			})
		},
		updateLabel(l, i){
			this.$http.post('updateLabel', {l_id: l.l_id, name: l.name}).then(res => {
				this.myAlert('更新完毕');
			})
		},
		removeLabel(l_id, i){
			this.$http.post('removeLabel', {l_id}).then(res => {
				this.myAlert('删除完毕');
			})
		},
		getDiary(){
			const labels = this.labels.filter(e => e.filter_active);
			const labelIds = labels.map(e => e.l_id);
			this.$http.post('getDiary', {date: this.date, labels: labelIds, page: this.page}).then(res => {
				this.diarys = res.body.rows;
				this.diaryCount = res.body.row_count;
				this.myAlert('日记现身!')
			})
		},
		myAlert(txt){
			this.tip = txt;
			setTimeout(() => this.tip = '咕叽咕叽', 1500)
		},
		test(){
			this.myAlert('boom')
		}
	}
}
</script>
<style lang='less' scoped>
	/*咦 为什么包住的div不会被渲染了?*/
	#main_container{
		width: 300px;
		margin: 0 auto;
	}
	*{box-sizing: border-box;}
	#tip_container{
		width: 300px;
		margin: 0 auto;
		height: 100px;
		background: url(rbt.png) no-repeat left;
		background-size: 100px;
		position: relative;
		#tip_dialog{
			position: absolute;
			background: url(dialog.png) no-repeat center;
			background-size: 100px;
			left: 80px;
			width: 100px;
			height: 80px;
		    bottom: 10px;
		    font-size: 12px;
		    padding: 35px 5px 5px 20px;
		    text-align: center;
		    line-height: 40px;
		}
	}
	.container{
		background: pink;
		border-radius: 5px;
		padding: 5px;
		width: 300px;
		margin: 0 auto;
		border-bottom: 2px solid #fff;
		span, div, p {font-size: 12px;}
	}
	.label{
		border-radius: 3px;
		background: #fff;
		font-size: 12px;
		margin-right: 10px;
		padding: 0 7px;
		cursor: pointer;
		position: relative;
		&.active{
			opacity: .5;
		}
	}
	.edit-container{
		position:relative;
		padding: 0 4px;
		&:hover .x{
			display: block;
		}
	}
	.diary-filter{
		margin-bottom: 5px;
		.fl{
			margin-right:5px;
		}
	}
	.fl{
		float: left
	}
	.cursor{
		cursor: pointer;
	}
	.m-top{
		margin-top:5px;
	}
	.x{
		position: absolute;
		top: 0px;
		right: 9px;
		font-weight: bold;
		cursor: pointer;
		display: none;
	}
	h5{
		margin: 10px 0;
	}
	input{
		outline: none;
		width: 200px;
		border: none;
		&.label{
			width: 100px;
		}
	}
	button{
		border: 1px solid #111;
		outline: none;
		padding: 0 5px;
		background: #fff;
		border-radius: 3px;
		margin: 5px 0;
		display: block;
		cursor: pointer;
	}
</style>